<template>
	<div class="clues flex-row">
		<div class="clues-left">
			<div class="search-box">
				<el-input type="text" size="small" placeholder="搜索账号" v-model="sechsdkey" @input="inputC"></el-input>
			</div>
			<div class="account-list">
				<div class="item flex-row" v-for="(item,index) in testAccount" :key="index"
					:class="{'active':item.check}" @click="selectAccount(item)">
					<el-avatar :size="40" :src="item.avatar"></el-avatar>
					<div class="name flex-column jc-space-between">
						<div class="top text-over">{{item.username}}</div>
						<div class="bottom">
							<span v-if="index%5===0">抖音</span>
							<span v-else class="red">头条</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="clues-right">
			<el-tabs type="border-card"  @tab-click="handleClick" v-model="tabsValue" v-if="rightList.length > 0" closable
				@tab-remove="handleTabsEdit">
				<el-tab-pane v-for="(item,index) in rightList" :label="item.username" :name="item.username">
					<div class="nine-title">{{tabsValue}}</div>
					<table class="table table-bordered custom-table">
						<tr>
							<th>开始日期</th>
							<th>截至日期</th>
							<th>剩余天数</th>
							<th>视频播放量</th>
							<th>粉丝量</th>
							<th>点赞量</th>
							<th>私信跟进量</th>
							<th>意向用户</th>
							<th>视频制作完成</th>
						</tr>
						<tr>
							<td>
								<el-date-picker v-model="form.service_start_time" type="date" placeholder="选择日期" size="small">
								</el-date-picker>
							</td>
							<td>
								<el-date-picker v-model="form.service_end_time" @change="service_end_time_fun" format="yyyy-MM-dd" type="date" placeholder="选择日期" size="small">
								</el-date-picker>
							</td>
							<td>
								<el-input v-model="form.remaining_service_days" size="small" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input v-model="form.video_playback_volume" size="small" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input v-model="form.fans_number" size="small" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input v-model="form.praise_quantity" size="small" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input v-model="form.private_letter_number" size="small" placeholder="请输入"></el-input>
							</td>
							<td>
								<el-input v-model="form.number_of_intended_users" size="small" placeholder="请输入"></el-input>
							</td>
							<!-- <td>
								<el-input v-model="form.number_of_completed_videos" size="small" placeholder="请输入"></el-input>
							</td> -->
							<td>
								<el-select v-model="form.number_of_completed_videos" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
						</tr>
					</table>

					<div class="nine-title">基本功能设置</div>
					<table class="table table-bordered custom-table">
						<tr>
							<th>昵称设置</th>
							<th>头像LOGO</th>
							<th>自定义头图</th>
							<!-- <th>昨日取消点赞</th> -->
							<th>公司简介</th>
							<th>主页链接</th>
							<th>是否已开通蓝V</th>
							<th>电话组件</th>
							<th>地址设置</th>
							<th>开通投放账户</th>
						</tr>
						<tr>
							<td>
								<el-select v-model="form.is_nickname" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_logo" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_custom_header" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							<td>
								<el-select v-model="form.is_company_profile" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_home_page_link" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_open_blue_v" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_telephone_components" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>

							<td>
								<el-select v-model="form.is_address_setting" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_open_release_account" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<!-- <td>
								<el-select v-model="value1" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td> -->
						</tr>
					</table>

					<div class="nine-title">企业号配置</div>
					<table class="table table-bordered custom-table">
						<tr>
							<th>商家页搭建</th>
							<th>商家页产品/服务页搭建</th>
							<th>商家页店铺活动搭建</th>
							<th>商家页基础信息搭建</th>
							<th>商家页企业图册搭建</th>
							<th>商家页企业优势模块搭建</th>
						</tr>
						<tr>
							<td>
								<el-select v-model="form.is_merchant_page_construction" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_merchant_page_products" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_business_activities" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							<td>
								<el-select v-model="form.is_merchant_information" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_merchant_atlas" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_business_advantage" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
						</tr>
					</table>
					
					<div class="nine-title">广告企划配置</div>
					<table class="table table-bordered custom-table" style="width: 600px;">
						<tr>
							<th>广告账户搭建</th>
							<th>投放计划搭建</th>
							<th>投放数据对接</th>
						</tr>
						<tr>
							<td>
								<el-select v-model="form.is_ad_account" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_launch_plan" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_launch_data" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
						</tr>
					</table>
					
					<div class="nine-title">用户行为配置</div>
					<table class="table table-bordered custom-table" style="width: 800px;">
						<tr>
							<th>用户点赞自动接待</th>
							<th>用户评论自动接待</th>
							<th>用户关注自动接待</th>
							<th>用户取消自动回复</th>
						</tr>
						<tr>
							<td>
								<el-select v-model="form.is_like_auto" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_comment_auto" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<el-select v-model="form.is_auto_focus" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
							<td>
								<!-- form.is_cancel_auto_reply -->
								<el-select v-model="form.is_cancel_auto_reply" placeholder="请选择" size="small">
									<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</td>
						</tr>
					</table>

					<div style="padding: 10px 0;" class="text-right" @click="sumotu()" v-if="get_rules('服务内容提交')">
						<el-button size="small" type="primary">提交</el-button>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
		import {Message} from 'element-ui';
		import {fuzzyQuery} from '../../util/index.js'
	export default {
		data() {
			return {
				sechsdkey:'',
				squareUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				testAccount: [], // 左边列表数据
				testAccounts:[],
				rightList: [], // 右边选项卡数据
				tabsValue: '',
				datetime: '',
				form:{},
				current_user_id:0,
				statelist: [{
						id: '1',
						name: '是'
					},
					{
						id: '0',
						name: '否'
					},
				]
			}
		},
		mounted() {
				 this.$http.post("common/users").then((response) => {
					 this.testAccount=response.data.records.map(res=>{
						  res.check=false;
						  return res;
					 });
					 this.testAccounts=this.testAccount;
					
				});
			
			
		},
		methods: {
			service_end_time_fun(){
				this.form.remaining_service_days=Math.ceil(this.getDaysBetween(this.getNowFormatDate(),this.form.service_end_time));
			},
			/**
			 * @param startDate  开始日期 yyyy-MM-dd
			 * @param enDate  结束日期 yyyy-MM-dd
			 * @returns {number} 两日期相差的天数
			 */
			 getDaysBetween(startDate, enDate) {
			  const sDate = Date.parse(startDate)
			  const eDate = Date.parse(enDate)
			  if (sDate > eDate) {
			    return 0
			  }
			  if (sDate === eDate) {
			    return 1
			  }
			  const days = (eDate - sDate) / (1 * 24 * 60 * 60 * 1000)
			  return days
			},
			 getNowFormatDate() {
			        var date = new Date();
			        var seperator1 = "-";
			        var year = date.getFullYear();
			        var month = date.getMonth() + 1;
			        var strDate = date.getDate();
			        if (month >= 1 && month <= 9) {
			            month = "0" + month;
			        }
			        if (strDate >= 0 && strDate <= 9) {
			            strDate = "0" + strDate;
			        }
			        var currentdate = year + seperator1 + month + seperator1 + strDate;
			        return currentdate;
			    },
			sumotu(){
				var path="Servicecontentset/add"
				if(this.form.id>0){
					path="Servicecontentset/edit"
				}
				this.$http.post(path,this.form).then(res=>{
					Message({ 
						type: 'success',
						message: '保存成功'
					});
				})
			},
			inputC(e){
				if(e.length<=0){
					
					this.testAccount=this.testAccounts;
				}else{
					var list=fuzzyQuery(this.testAccounts,'username',e);
					this.testAccount=list;
				}
				
			},
			loadData(){
				this.form={};
				this.$http.post("Servicecontentset/lists",{customer_uid:this.current_user_id}).then((response) => {
						if(response.data.total==0){
							this.form={
								"id":0,
								'customer_uid':item.id,
					"service_start_time":'',
					"service_end_time": '',
					"remaining_service_days": '',
					"video_playback_volume": '',
					"fans_number": '',
					"praise_quantity": '',
					"private_letter_number": '',
					"number_of_intended_users": '',
					"number_of_completed_videos": '',
					"is_nickname": '',
					"is_logo": '',
					"is_custom_header": '',
					"is_company_profile": '',
					"is_home_page_link": '',
					"is_open_blue_v": '',
					"is_telephone_components": '',
					"is_address_setting": '',
					"is_open_release_account": '',
					"is_merchant_page_construction": '',
					"is_merchant_page_products": '',
					"is_business_activities": '',
					"is_merchant_information": '',
					"is_merchant_atlas": '',
					"is_business_advantage": '',
					"is_ad_account": '',
					"is_launch_plan": '',
					"is_launch_data": '',
					"is_like_auto": '',
					"is_comment_auto": '',
					"is_auto_focus": '',
					"is_cancel_auto_reply": '',
				}
						}else{
							var datas=response.data.records[0];
							datas.service_start_time=datas.service_start_time_text
							datas.service_end_time=datas.service_end_time_text;
							
							
							delete datas.createtime;
							delete datas.updatetime;
							delete datas.service_start_time_text
							delete datas.service_end_time_text
							delete datas.customer_name
							this.form=datas;
							if(datas.service_end_time){
									this.form.remaining_service_days=Math.ceil(this.getDaysBetween(this.getNowFormatDate(),datas.service_end_time))
							}
						
						}
						
						
						
					});
			},
			handleClick(e){
					this.current_user_id=this.rightList[e.index]['id'];
					this.loadData();
			},
			selectAccount(item) { // 左边账号列表点击事件
				if (item.check) { // 点击左边的列表，只允许选中，取消的话点击右边的关闭按钮
					return false;
				}
				item.check = true;
				this.rightList.push(item);
				this.tabsValue = item.username;
				this.current_user_id=item.id;
				this.loadData();
				
			},
			handleTabsEdit() { // 右边tabs选项卡删除事件
				//console.log(1234, this.tabsValue)
				this.rightList.forEach((n, i) => {
					if (n.username === this.tabsValue) {
						// 删除以后要给tabs默认选中一个
						let nextTab = this.rightList[i + 1] || this.rightList[i - 1];
						if (nextTab) {
							this.tabsValue = nextTab.username;
						}
						var is_del=false;
						this.testAccount.forEach(nn => { // 左边列表选中状态给他取消
						
							if (nn.username === n.username) {
								nn.check = false;
								is_del=true;
							}
						})
						if(is_del){
							this.rightList.splice(i, 1);
						}
						 
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.clues {
		width: 100%;
		height: auto;

		.clues-left {
			width: 220px;
			height: calc(100vh - 66px);
			overflow-x: hidden;
			overflow-y: auto;
			background-color: #FFF;
			margin-right: 10px;

			.search-box {
				padding: 10px;
			}

			.account-list {
				padding-bottom: 15px;

				.item {
					padding: 5px 0;
					margin-bottom: 5px;
					cursor: pointer;

					.name {
						width: calc(100% - 60px);
						margin-left: 10px;

						.top {
							font-size: 15px;
							color: #626066;
						}

						.bottom {
							color: darkblue;
							font-size: 12px;
							font-weight: bolder;
						}
					}
				}

				.active {
					background-color: #F1F3FC;
				}
			}
		}

		.clues-right {
			width: calc(100% - 230px);
			background-color: #FFF;

			.tab-pane-btns {
				margin-bottom: 16px;
			}
		}
	}
</style>
